<html>
<head>
<title>Edit Exam Properties</title>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" ></script>
<link type="text/css" rel="stylesheet" href="/stylesheets/question_search.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/dark-hive/jquery-ui.css" />
<style>
///.BeforeImgId {a
</style>
<script>
$(function() { // JQuery lookup function
	$( "#questions" ).autocomplete({
		source: "/question_search_json",
                select: function (event, ui) { $("#questions-id").val(ui.item.id);$("#append-questions-id").val(ui.item.id); }
	});
});

function setQuestionBeforeId(id)	// set id of question before new question
{					// should be inserted by means of hidden element
//	Enable the submit Insert form on 2 conditions: + clicked and question chosen.
	var hiddenVar = document.getElementById('beforeQuestionId');
	var frmInsert = document.getElementById('add_question');
	var elQuestionsId = document.getElementById('questions-id');
	
	
	if (elQuestionsId.value.length > 0) {
	    hiddenVar.value = id;
	    frmInsert.Insert.disabled = false;
	}
	else {
	    frmInsert.Insert.disabled = false;
	    //alert("Please pick first a question to insert.");
	}
	hiddenVar.value = id;
}

function append_to_exam() {		// set hidden element flag to true so new question will be appended. 
        var myForm = document.getElementById('add_question');
        var el   = document.createElement('input');
        el.setAttribute('type', 'hidden');
        el.setAttribute('name', 'append');
        el.setAttribute('value', 'true');
        myForm.appendChild(el);
	myForm.submit();
}

function SaveExamForm()			// Save exam propertry changes, name and duration
{
     	var examForm = document.getElementById('frmExamEdit');
	// TODO: no validation functionality yet.....
        alert ("Exam Submit");	
	examForm.submit();
}
</script>
</head>
<body>
<h1>Exam Properties</h1>

<form action="/exam_submit" method="post" id="frmExamEdit" name="frmExamEdit"></br>
      	<div><div class="labelEdit">Exam Name</div><input class="myTextInput" type="text" id="examName" name="examName" value="{{ name }}">
	     <input class="myIntText" type="text" name="examId" id="examId" value="{{ id }}" ></div>
	<div>
	<div class="labelEdit">Duration </div><input class="myIntText" type="text" id="examDuration" name="examDuration" value="{{ duration }}" alt="In minutes"></div>
	<hr></hr>
	<div class="labelEdit">Related Questions</div><br>
	<table border=0>	
	{% for q in questions %}
		<tr>
		<td>{{ q.question }}</td>
		<td><a href="/delete_from_exam?qId={{ q.id }}&examId={{ id }}">
		<img alt="Delete question" class="modPicQuestion" src="img/trash-can.png"></img></a>&nbsp;
		<a onMouseOver="this.style.cursor='hand'" onclick="setQuestionBeforeId({{ q.id }});">                
		<img alt="Add question" class="modPicQuestion" src="img/Add-Icon.jpg"></a>
                </td></tr>      		
    	{% endfor %}
	</table>
</form>
<hr>

<form name="add_question" id="add_question" action="/question_add" method="get"></br>
     <div class="ui-widget" id="q" name="q">
	<label for="questions">Question: </label>
	<input id="questions">
	<input name="questionId"  id="questions-id">
	<input name="examId"    type="hidden" value="{{ id }}">
	<input id="beforeQuestionId" name="beforeQuestionId"  type="hidden" value="">
	<input type="submit" disabled="true"  value="Insert" name="Insert" id="Insert">
     </div>
</div>
</form>
<form><input type="button" value='Append' id="append" onclick="append_to_exam()"></form>
<form><input type="button" value='Save Exam' id="Save_Exam" onclick="SaveExam()"></form>
<hr><br>
<div class="myHelpTxt">Click trash icon to delete a question<br>Click add (+) icon to insert a question</div><div>
<br>
<a href="/">Start Page</a>
</body>
</html>


